<!--suppress ALL -->
<template>
    <div class="page" data-page="safetyRank" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left" @click=$root.backToTab()>
                    <a class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title sliding">警情排名</div>
            </div>
        </div>
        <div class="page-content home-content ptr-content" @ptr:refresh="refreshFirstRank">
            <div class="ptr-preloader">
                <div class="preloader"></div>
                <div class="ptr-arrow"></div>
            </div>
            <!--建筑消防安全隐患排名模块-->
            <div class="trouble-title card-header">单位警情统计
                <div class="myblock">
                    <form id="date-type-form">
                        <select name="dateType" id="safetyRank_select" style="font-size:10px;padding:2px 10px; border: 1px solid;  color:#1b9cd6;"
                                class="date-type trouble-date-type" @change="firstRank">
                            <option value="2">最近一年</option>
                            <option value="1">最近一个月</option>
                            <option value="0">最近24小时</option>
                        </select>
                    </form>
                </div>
            </div>
            <div class="card-content card-content-padding">
                <div class="list">
                    <ul id="unitRankContent">

                    </ul>
                </div>
            </div>
        </div>
        <!--建筑消防安全隐患排名模块-->
    </div>
</template>
<style scoped>
    .company_name {
        font-size: 15px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;
    }

    .company_address {
        padding-top: 3px;font-size: 13px;
        overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 40px;
    }
    .company_alarms{
        position: absolute;right: 0px;color: #f5687b;font-size: 19px;top: 20px;
    }


    .title {
        padding-right: 56px;
        margin: 0px auto;
    }

    #unitRankContent {
        padding-left: 15px;
        padding-right: 15px;
    }

    .trouble-title {
        padding-left: 14px;
        font-size: 14px;
    }

    .trouble-pic {
        width: 34px;
        height: 34px;
        position: relative;
        text-align: center;
    }

    .trouble-pic1 {
        display: block;
        background-image: url(./img/home/redCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .trouble-pic2 {
        display: block;
        background-image: url(./img/home/yellowCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .trouble-pic3 {
        display: block;
        background-image: url(./img/home/blueCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .trouble-pic4 {
        display: block;
        background-image: url(./img/home/greenCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }
</style>
<script>
    return {
         on: {
            pageInit: function(e, page) {
                  var self = this;
                  $("#safetyRank_select").val(this.$route.params.dataType)
                  $("#unitRankContent").empty();
                  self.getRank(this.$route.params.dataType);
            }
         },
        data: function () {
            return {
                id: this.$route.params.id,
            }
        },
        // Component Methods
        methods: {
            //刷新
            refreshFirstRank: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        self.firstRank();
                        self.pageInitTime = 1;
                        done();
                    }, 1000);
                }
            },
            firstRank: function () {
                var self = this;
                $("#unitRankContent").empty();
                self.getRank();
            },
            getRank: function () {
                var $ = this.$;
                var app = this.$app;
                var router = this.$router;
                common.loading(1);
                var formData = app.form.convertToData('#date-type-form');
                var dateType = jQuery.trim(formData.dateType);
                //var dateType=$("#dateType option:selected").val();
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.troubleRank({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: id_org,
                    orgType: 1,
                    time: dateType
                }, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var no = i + 1;

                        if (no < 4) {
                            $("#unitRankContent").append(
                                `<li><a href="/unitInfo/`+data[i].orgId+`/" class="item-content" data-view=".view-main"><div class="item-media trouble-pic` + no + `" style="line-height: 43px;margin-left: -20px;font-size:  12px;text-align:center;color: #ffffff">No.` + no + `</div>
                            <div class="item-inner">
                            <div class="item-title">
                            <div class="company_name " >` + common.transNullundefined(data[i].name) + `</div>
                            <div class="company_address">` + common.transNullundefined(data[i].address) + `</div></div></div>
                            <div class="company_alarms">` + data[i].alert + `次</div></a></li>`
                            );
                        } else {
                            $("#unitRankContent").append(
                                `<li>
                                    <a href="/unitInfo/`+data[i].orgId+`/" class="item-content" style="padding-left: 0px;" data-view=".view-main">
                                        <div class="item-media trouble-pic4" style="line-height: 43px;font-size:12px;text-align:center;color: #ffffff">No.` + no + `</div>
                                        <div class="item-inner">
                                        <div class="item-title">
                                        <div class="company_name">` + common.transNullundefined(data[i].name) + `</div>
                                        <div class="company_address">` + common.transNullundefined(data[i].address) + `</div></div></div>
                                        <div class="company_alarms">` + data[i].alert + `次</div>
                                    </a>
                                </li>`
                            );
                        }
                    }
                    common.loading(0);
                });
            },
        },
    }
</script>